<template>
	<view class="panel">
		<h1>{{title}}</h1>
		<echarts :option="option" class="echarts"></echarts>
		<view class="panel-footer"></view>
	</view>
</template>

<script>
	// 导入组件
	import echarts from './echarts.vue'

	export default {
		name: "mypanel",
		data() {
			return {
				
			};
		},
		// 参数传递
		props: {
			title: {
				type: String,
				default: '图表'
			},
			option: {
				type: Object,
				required:true,
				default: () => {
					return {
						title: {
							text: 'My Panel组件'
						},
						tooltip: {},
						legend: {
							data: ['销量']
						},
						xAxis: {
							data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
						},
						yAxis: {},
						series: [{
							name: '销量',
							type: 'bar',
						data: [5, 20, 36, 10, 10, 20]
						}]
					}
				}
			}
		},
		// 注册组件
		components: {
			echarts
		}
	}
</script>

<style lang="less">
	.panel {

		// 高度: 310px
		// 边框: 1像素的 1px solid rgba(25, 186, 139, 0.17)
		// 背景图片: line.jpg, 背景色透明度：rgba(255, 255, 255, 0.03)
		// 内边距：上为 0 左右 15px 下为 40px
		// 下外边距：15px
		// 上面两个角：大小为 10px 线条为 2px solid #02a6b5
		// 下面两个角： 参照上面两个角的做法
		// 标题：高度为48px，文字颜色为白色，文字大小为20px
		// 图表：高度240px
		// height: 620upx;
		height: 480upx;
		// background-color: aqua;
		border: 1px solid rgba(25, 186, 139, 0.17);
		background: url(../static/images/line.png);
		padding: 20upx 80upx;
		margin-left: 10upx;
		margin-bottom: 30upx;

		position: relative;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 10px;
			height: 10px;
			border-left: 2px solid #02a6b5;
			border-top: 2px solid #02a6b5;
		}

		&::after {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			width: 10px;
			height: 10px;
			border-right: 2px solid #02a6b5;
			border-top: 2px solid #02a6b5;
		}

		h1 {
			height: 96upx;
			color: white;
			font-size: 40upx;

			display: flex;
			justify-content: center;
			align-items: center;
		}

		.panel-chart {
			height: 480upx;
			// border: solid 1px red;
		}

		.panel-footer {
			// border: solid 1px red;
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;

			&::before {
				content: "";
				position: absolute;
				bottom: 0;
				left: 0;
				width: 10px;
				height: 10px;
				border-left: 2px solid #02a6b5;
				border-bottom: 2px solid #02a6b5;
			}

			&::after {
				content: "";
				position: absolute;
				bottom: 0;
				right: 0;
				width: 10px;
				height: 10px;
				border-right: 2px solid #02a6b5;
				border-bottom: 2px solid #02a6b5;
			}
		}

	}
</style>